import classNames from 'classnames';
import styles from './index.module.scss';

interface IInputProps
  extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
  errorMsg?: string;
  extra?: React.ReactNode;
}
export default function Input({ className, errorMsg, extra, ...restProps }: IInputProps) {
  return (
    <div className={styles.root}>
      <div className="input-box">
        <input className={classNames('input', className)} {...restProps} />
        <div className="validate">{errorMsg}</div>
        <div className="extra">{extra}</div>
      </div>
    </div>
  );
}
